<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/tundra/tundra.css";
		@import "../../../dijit/themes/tundra/tundra_rtl.css";
		
		.search-result {
			float: left;
			width: 150px;
			border: 2px dashed;
			padding: 4px;
		}
	</style>

	<title>Google Search store</title>

	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.data.GoogleSearchStore");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.FilteringSelect");
		dojo.require("dojox.dtl");
		dojo.require("dojox.dtl.ext-dojo.NodeList");

		function doSearch() {
			var queryOptions = {};
					    
			var query = {};
			query.text = dojo.byId("searchText").value;
			query.type = dojo.byId("typeText").value;
			var request = {query:query};
			
			var itemBuffer = [];
			var maxBufSize = 8;
			var outNode = dojo.byId("output");
			outNode.innerHTML = "Searching...";	
			var count = 0;
			var template = "GoogleTemplate.html";
			switch(query.type) {
				case "web" :
					testStore = new dojox.data.GoogleSearchStore();					
					break;
				case "blogs":
					testStore = new dojox.data.GoogleBlogSearchStore();
					template = "GoogleTemplateBlog.html";
					break;
				case "local":
					testStore = new dojox.data.GoogleLocalSearchStore();
					template = "GoogleTemplateLocal.html";
					break;
				case "video":
					testStore = new dojox.data.GoogleVideoSearchStore();
					template = "GoogleTemplateVideo.html";
					break;
				case "news":
					testStore = new dojox.data.GoogleNewsSearchStore();
					break;
				case "books":
					testStore = new dojox.data.GoogleBookSearchStore();
					break;
				case "images":
					testStore = new dojox.data.GoogleImageSearchStore();
					template = "GoogleTemplateImage.html";
					break;
			}
			
			function doAppend(){
				var node = document.createElement("span");
				node.id = "res" + (count++);
				outNode.appendChild(node);
				dojo.query("#"+node.id).dtl(template, { items: itemBuffer , store: testStore});
			}
			
			request.onBegin = function(numItems){
				outNode.innerHTML += ".. found " + numItems + " results";
			};
			
			request.onItem = function(item){
				itemBuffer.push(item);
				if(itemBuffer.length >= maxBufSize){
					console.log("onItem, buffer length = " + itemBuffer.length + " & maxBufSize = " + maxBufSize);
					doAppend();
					itemBuffer = [];
				} else {
					console.log("onItem, buffer length = " + itemBuffer.length);
				}
			};
			
			request.onComplete = function (items) {				
				if (itemBuffer.length > 0) {
					doAppend();
				}
			};

			var count = dojo.byId("count").value;
			request.count = count ? Number(count) : 8;			
			
			testStore.fetch(request);
		}
	</script>
</head>
<body class="tundra" style="margin:20px;">
	<form>
		Text: <input id="searchText" type="text" value="dojo ajax"/>
		Count: <input id="count" type="text" value="8" width=20/>
		<input id="searchButton" type="button" value="store.fetch()" onclick="doSearch()" />
		Type 
			<select id="typeText" name="typeText">
				<option selected value="web">Web</option>
				<option value="local">Local</option>
				<option value="video">Video</option>
				<option value="blogs">Blogs</option>
				<option value="news">News</option>
				<option value="books">Books</option>
				<option value="images">Images</option>			
			</select> 
		<div id="output">
			
		</div>
	</form>
</body>
</html>
